<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div ng-app="myApp" ng-controller="myCtrl">
        <select ng-init="selectedName = sites[0]" ng-model="selectedName" ng-options="x.site for x in sites">

        </select> {{selectedName.url}}
    </div>
    <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
    <script>
        var app = angular.module('myApp', []);
        app.controller('myCtrl', function($scope) {
            $scope.names = ["Google", "Runoob", "Taobao"];
            $scope.sites = [{
                site: "Google",
                url: "http://www.google.com"
            }, {
                site: "Runoob",
                url: "http://www.runoob.com"
            }, {
                site: "Taobao",
                url: "http://www.taobao.com"
            }];
        });
    </script>
</body>

</html>